<template>
  <div class="my_index">
    <header class="top">
      <header class="vip">
        <section class="con">
          <div class="header">
            <div class="avatar">
              <img :src="userInfo.headimgurl" alt="" />
            </div>
            <div class="name">{{ userInfo.nickname }}</div>
          </div>
          <div class="grade">
            <div class="title">
              铂金会员
              <span class="icon"></span>
            </div>
            <div class="progress">
              <div class="value"></div>
            </div>
            <div class="text">78/100升级</div>
          </div>
          <div class="scan"><span class="tip"></span></div>
          <div class="no">NO. 8000 8010 0391 8956</div>
        </section>
      </header>
      <footer class="cont">
        <router-link :to="'/' + enterpriseId + '/charge/amount'" class="item">
          <div class="amount">￥100</div>
          <div class="text">卡余额</div>
        </router-link>
        <!--<div class="line"></div>-->
        <router-link :to="'/' + enterpriseId + '/point'" class="item">
          <div class="amount">1000</div>
          <div class="text">积分</div>
        </router-link>

        <!--<div class="line"></div>-->
        <router-link :to="'/' + enterpriseId + '/coupon'" class="item">
          <div class="amount">5</div>
          <div class="text">优惠劵</div>
        </router-link>
      </footer>
    </header>
    <footer class="bottom">
      <div class="title">VIP 权益</div>
      <div class="cont">
        <nuxt-link
          class="item"
          :to="'/charge/?enterpriseId=' + enterpriseId"
          tag="div"
        >
          <div class="icon vip"></div>
          <div class="text">电子卡会员卡</div>
        </nuxt-link>
        <nuxt-link class="item" :to="'/' + enterpriseId + '/order'" tag="div">
          <div class="icon consume"></div>
          <div class="text">消费记录</div>
        </nuxt-link>
        <!--
        <div class="item">
          <div class="icon"></div>
          <div class="text">开具发票</div>
        </div>
        -->
        <div class="item">
          <div class="icon car"></div>
          <div class="text">爱车资料</div>
        </div>
        <!--
        <div class="item">
          <div class="icon"></div>
          <div class="text">油站导航</div>
        </div>
        -->
        <div class="item">
          <div class="icon recommend"></div>
          <div class="text">推荐有奖</div>
        </div>
        <!--
        <div class="item">
          <div class="icon"></div>
          <div class="text">车队卡</div>
        </div>
        -->

        <div class="item">
          <div class="icon setting"></div>
          <div class="text">支付设置</div>
        </div>
        <wx-open-launch-weapp
          class="item"
          id="launch-btn"
          username="gh_b0f9c36e7c48"
          path="pages/list/list"
          v-if="!!unionId && showGoApplet"
        >
          <script type="text/wxtag-template">
            <div class="wrap">
              <div class="icon">占位</div>
              <div class="text">一键加油</div>
            </div>
          </script>
        </wx-open-launch-weapp>
      </div>
    </footer>
    <!--<div class="goApplet">去加油</div>-->
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import wx from "weixin-js-sdk";
export default {
  head() {
    return {
      title: "我的",
    };
  },
  data() {
    return {
      showGoApplet: false,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
    }),
  },
  mounted() {
    // this.getPointInfo();
  },
  created() {
    if (this.unionId) {
      this.goto();
    }
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig",
    }),
    goto() {
      const that = this;
        this.getSdkConfig({
          jsApiList: ["wx-open-launch-weapp"],
          openTagList: ["wx-open-launch-weapp"],
        }).then((res) => {
          wx.config(res);
          wx.error(function (err) {
            console.log(err);
            that.showGoApplet = false;
          });
        });
    },
  },
};
</script>

<style lang="scss" >
.my_index {
  padding: 0.2rem;
  padding-bottom: 0;
  width: 100vw;
  box-sizing: border-box;
  .top {
    background-color: #2c2d30;
    height: 4.7rem;
    overflow: hidden;
    .vip {
      //background-color: #fbdc95;
      background: url("../../static/vip/bj.png") no-repeat 0 0;
      background-size: 100% 100%;
      width: 95%;
      margin: 0 auto;
      height: 3rem;
      margin-top: 0.5rem;
      padding: 0.2rem 0.3rem;
      box-sizing: border-box;
      border-radius: 0.3rem 0.3rem 0 0;
      position: relative;
      > .con {
        //background-color: rgb(148, 84, 84);
        height: 100%;
        position: relative;
        .header {
          width: 1.3rem;
          height: 1.4rem;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          .avatar {
            width: 1rem;
            height: 1rem;
            background: #000;
            border-radius: 0.5rem;
            overflow: hidden;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            font-size: 0.2rem;
            color: #7c6c43;
          }
        }
        .grade {
          width: 2.4rem;
          position: absolute;
          left: 1.5rem;
          top: 0;
          .title {
            color: #483c22;
            font-size: 0.32rem;
            // font-weight:bold;
            .icon {
              background: url("../../static/vip/vipicon.png") no-repeat 0 0;
              background-size: 100% 100%;
              display: inline-block;
              width: 0.25rem;
              height: 0.25rem;
            }
          }
          .progress {
            width: 2.4rem;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top: 0.2rem;
            background-color: #deb46d;
            .value {
              width: 1rem;
              height: 3px;
              background-color: #fff6e7;
            }
          }
          .text {
            margin-top: 0.1rem;
            font-size: 12px;
            text-align: right;
            //color: #cc9a54;
            color: #fadb92;
          }
        }
        .scan {
          width: 0.7rem;
          height: 0.7rem;
          position: absolute;
          right: 0.1rem;
          top: 0.2rem;
          background: url("../../static/vip/scan3.png") no-repeat 0 0;
          background-size: 100% 100%;
          .tip {
            background: url("../../static/vip/tip.png") no-repeat 0 0;
            background-size: 100% 100%;
            display: inline-block;
            width: 1.2rem;
            right: -0.25rem;
            height: 0.5rem;
            position: absolute;
            bottom: -0.6rem;
          }
        }
        .no {
          //color: #da9e4f;
          color: #facf83;
          font-size: 0.35rem;
          text-align: center;
          position: absolute;
          width: 100%;
          bottom: 0.2rem;
        }
      }
    }
    .cont {
      color: #92964f;
      //background-color: #ebd8ae;
      display: flex;
      justify-content: space-around;
      text-align: center;
      height: 1.2rem;
      .item {
        display: flex;
        justify-content: space-around;
        text-align: center;
        flex-direction: column;
        color: #90954e;

        .amount {
          height: 0.6rem;
          font-size: 0.3rem;
          font-weight: bolder;
          line-height: 0.6rem;
        }
        .text {
          height: 0.4rem;
          font-size: 0.21rem;
          line-height: 0.3rem;
        }
      }
      .line {
        width: 1px;
        height: 0.7rem;
        margin-top: 0.2rem;
        background-color: #dbdbdb;
      }
    }
  }
  .bottom {
    width: 100%;
    margin-top: 0.2rem;
    > .title {
      color: #404040;
      font-weight: bolder;
      font-size: 0.28rem;
      margin-left: 0.1rem;
    }
    > .cont {
      height: 3.6rem;
      width: 6.8rem;
      margin: 0 auto;
      margin-top: 0.4rem;
      //background-color:#f4cf89;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      align-content: space-between;
      //align-content:flex-start;

      .item {
        width: 31%;
        height: 1.5rem;
        //background-color:#c2af8d;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        border: 1px solid #f0f0f0;

        .icon {
          width: 0.39rem;
          height: 0.39rem;
          background-color: rgba(240, 210, 153, 100);
          background-size: 100% 100%;
        }
        .text {
          height: 0.32rem;
          color: rgba(87, 87, 87, 100);
          font-size: 0.21rem;
          text-align: center;
          font-weight: bold;
          font-family: SourceHanSansSC-regular;
        }
      }
      .item:not(:nth-child(3n)) {
        margin-right: calc(6.3% / 3);
      }
      .item {
        .vip {
          background: url("../../static/vip/vip001.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .consume {
          background: url("../../static/vip/consume.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .car {
          background: url("../../static/vip/car.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .recommend {
          background: url("../../static/vip/recommend.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item {
        .setting {
          background: url("../../static/vip/setting.png") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item:nth-child(6) {
        .icon {
          background: url("../../static/vip/a6.svg") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item:nth-child(7) {
        .icon {
          background: url("../../static/vip/a7.svg") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
      .item:nth-child(8) {
        .icon {
          background: url("../../static/vip/a8.svg") no-repeat 0 0;
          background-size: 100% 100%;
        }
      }
    }
  }
  .goApplet {
    position: fixed;
    top: 50%;
    right: 10vw;
    height: 50px;
    width: 50px;
    background-color: rgb(233, 212, 212);
    border-radius: 20px;
    text-align: center;
    font-size: 20px;
  }
}
</style>
